<template>
    <div class="login-container " >
        <!-- 导航栏 -->
       <van-nav-bar 
            class="page-nav-bar" 
            title="登录" >
            <van-icon 
                slot="left" 
                name="cross"
                @click="$router.back()"
            ></van-icon>
       </van-nav-bar> 
       <!-- 登录表单 -->
       <!-- 
        表单验证：当表单提交的时候会自动触发表单验证，如果验证不通过，不会触发 submit 事件
        -->
       <van-form ref="loginForm" @submit="onSubmit">
            <van-field
                name="mobile"
                placeholder="请输入手机号" 
                left-icon="phone-circle-o"
                v-model="user.mobile"
                :rules='userFormRules.mobile'
                type="number"
                maxlength="11"
            />
            <!-- 使用left-icon属性添加Vant组件库的图标 -->
            <van-field
                name="code"
                placeholder="请输入验证码" 
                v-model="user.code"  
                :rules='userFormRules.code'
                type="number"
                maxlength="6"      
            >
                 <!-- 使用插槽添加左侧自定义的验证码（看文档） -->
                 <i slot="left-icon" class="iconfont icon-yanzhengma"></i>
                 <template #button>
                    <!-- time:倒计时时间 -->
                    <van-count-down 
                        v-if="isCountDownShow" 
                        :time="1000 * 60" 
                        format="ss s" 
                        @finish="isCountDownShow = false"
                    />
                    <van-button 
                        v-else
                        class="send-sms-btn" 
                        native-type="button"
                        round size="small" 
                        type="default"
                        @click="onSendSms"
                    >获取验证码</van-button>
                </template>
            </van-field>

            <div class="login-btn-wrap">
                <van-button 
                    class="login-btn" 
                    block type="info" 
                    native-type="submit"
                >登录</van-button>
            </div>
        </van-form>
    </div>
    
</template>
  
<script>
import { login,sendSms } from '@/api/user'
export default {
    name: 'LoginIndex',
    components: {},
    props: {},
    data () {
        return {
            user: {
                mobile: '', //手机号
                code:''  //验证码
            },
            userFormRules: {
                mobile: [{
                    required: true,
                    message:'手机号不能为空'
                }, {
                    pattern:/^1[3|5|7|8]\d{9}$/,
                    message:'手机号格式错误'
                }],
                code: [{
                    required: true,
                    message:'验证码不能为空'
                }, {
                    pattern: /^\d{6}$/,
                    message:'验证码格式错误'
                }]
            },
            isCountDownShow:false  //是否显示倒计时
        }
    },
    computed: {},
    watch: {},
    created () {},
    mounted () {},
    methods: {
        async onSubmit (values) {
            // 1、获取表单数据
            const user = this.user 
            // 2、表单验证
            // 在组建中必须通过 this.$toast 来调用 Toast 组件
            this.$toast.loading({
                message: '登录中...',
                forbidClick: true,  // 禁用背景点击
                duration: 0 // 持续时间。默认2000 ，如果为0，则持续展示
            });
            // 3、提交表单请求登录
            try {
                const { data } = await login(user)
                // console.log('登陆成功', res);
                this.$store.commit('setUser',data.data)
                // 任何一个新的toast被调用，都会把之前的toast停掉
                this.$toast.success('登录成功')

                // 登录成功，跳转回原来的页面
                //  back 的方式不严谨，后面讲功能优化的时候再说
                this.$router.back()
            } catch (err) {
                if (err.response.status === 400) {
                    this.$toast.fail('手机号或验证码错误');
                } else {
                    this.$toast.fail('登录失败,请稍后重试');
                }
            }
            // 4、根据请求响应结果处理后续操作
        },
        async onSendSms() {
            // 1、校验手机号
            try {
                await this.$refs.loginForm.validate('mobile')
                console.log('验证通过');
            } catch(err) {
                return console.log('验证失败',err);
            }
            // 2、验证通过，显示倒计时
             this.isCountDownShow = true
            // 3、请求发送验证码
            try {
                await sendSms(this.user.mobile)
                this.$toast('发送成功')
            } catch (err) {
                // 发送失败，关闭倒计时
                this.isCountDownShow = false
                if (err.response.status === 429) {
                    this.$toast('发送太频繁了，请稍后重试')
                } else {
                    this.$toast('发送失败，请稍后重试')
                }
            }
        }
    }
}
</script>

<style scoped lang="less">
    .login-container{
        .iconfont{
            font-size: 37px;
        }

        .send-sms-btn{
            width: 152px;
            height: 46px;
            line-height: 46px;
            background-color: #ededed;
            font-size: 22px;
            color: #666;
        }
        .van-button--small{
            padding: 0;
        }

        .login-btn-wrap{
            padding:53px 28px;
            .login-btn{
                background-color: #6db4fb;
                border: none;
            }
        }
    }

</style>